<template>
    <div class="dischargeport">
        <div class="h20">选择船卸货港<span style="color:red">(卸货港可填目的国的任意港口)</span></div>
        <Form ref="formInline" :model="searchData" :label-width="60" inline>
            <Row>
                <Col span="7">
                <FormItem label="编码">
                    <Input height="22px" v-model="searchData.dataCode" placeholder=""></Input>
                </FormItem>
                </Col>
                <Col span="7">
                <FormItem label="名称">
                    <Input height="22px" v-model="searchData.dataName" placeholder=""></Input>
                </FormItem>
                </Col>
                <Col span="7">
                <FormItem label="国家名称">
                    <Input height="22px" v-model="searchData.dataThirdType" placeholder=""></Input>
                </FormItem>
                </Col>
                <Col span="3">
                <FormItem>
                    <Button type="primary" @click="getDischargePortList()">查询</Button>
                </FormItem>
                </Col>
            </Row>
        </Form>

        <el-table ref="" :data="this.dischargePortList" @selection-change="handleSelectionChange" border highlight-current-row max-height="180" @row-dblclick="dClick" class="table-list" >
            <el-table-column label="" width="65">
                <template slot-scope="scope">
                    <Checkbox v-model="scope.row.checked" @on-change="handleSelectionChange(scope.row)"></Checkbox>
                    <!--<Radio v-model="checked" @change="handleSelectionChange(scope)">Radio</Radio>-->
                </template>
            </el-table-column>
            <el-table-column prop="dataCode" label="编码" ></el-table-column>
            <el-table-column prop="dataName" label="名称" ></el-table-column>
            <el-table-column prop="dataSecondType" label="国家代码"></el-table-column>
            <el-table-column prop="dataThirdType" label="国家名称" ></el-table-column>
        </el-table>
        <div class="content-footer">
            <Page
                @on-change="currentChange"
                @on-page-size-change="pageSizeChange"
                :page-size="searchData.pageSize"
                :current="searchData.pageNum"
                :total="total"
                :transfer="true"
                show-total
                show-sizer
                show-elevator
            />
        </div>
    </div>

</template>
<script>
import { getBasicData } from '@/api/declare.js'
export default {
    name: 'OpenDisChargePort',
    data () {
        return {
            dischargePortList: [],
            searchData: {
                dataMainType: 'SHIP_MANIFEST_PORT',
                pageNum: 1,
                pageSize: 10,
                dataCode: '',
                dataName: '',
                dataThirdType: ''
            },
            total: 0

        }
    },
    created () {
        // 卸货港
        this.getDischargePortList()
    },
    methods: {
        handleSelectionChange (row) {
            // el-radio单选框,不需要这一步
            this.dischargePortList.forEach(item => {
                // 排他,每次选择时把其他选项都清除
                if (item.dataCode !== row.dataCode) {
                    item.checked = false
                }
            })
            // 如果使用单选框,这里可以把当前选中的这一项先保存起来
            this.$emit('getV', row)
        },
        getContainerDetails (row) {
            console.log(row)
        },
        // 获取卸货港列表
        getDischargePortList () {
            getBasicData(this.searchData).then(res => {
                this.dischargePortList = res.data.data.list
                this.total = res.data.data.total
            })
        },
        // 页码改变回调
        currentChange (v) {
            this.searchData.pageNum = v
            this.getDischargePortList()
        },
        // 每页条数改变回调
        pageSizeChange (v) {
            this.searchData.pageSize = v
            if (this.searchData.pageNum === 1) {
                this.getDischargePortList()
            }
        },
        dClick (row) {
            console.log(row)
            this.$emit('getValue', row)
        }

    }
}
</script>
<style lang="less"  scoped>
.dischargeport{
    .content-footer{
    margin-top: 10px;
    float:right;
    }

}
.h20{
    font-weight: bold;
    margin-bottom:10px;
    height:20px;
    line-height: 20px;
    color:#000;
}
.red{
    color:red;
}

</style>
